<template>
	<view class="complaintde" v-if="ComDetail">
		<!-- 头部 -->
		<view class="hearder">
			<view class="title">{{ComDetail.status}}</view>
			<view class="hear-box">
				<view class="box-title"><text class="txt">投诉原因：</text>{{ComDetail.complaint_desc}}</view>
				<view class="box-title" v-if="ComDetail.reply"><text class="txt">回复内容：</text>{{ComDetail.reply}}</view>
				<view class="img-box" v-if="imgList[0]">
					<block v-for="(item,i) in imgList" :key="i">
						<u-image class="img" width="189rpx" height="180rpx" :src="item"></u-image>
					</block>
				</view>
			</view>
		</view>

		<!-- 下 -->
		<view class="bom">
			<view class="bom-left">
				<view class="texter leftitle">订单信息</view>
				<view class="texter">服务内容</view>
				<view class="texter">订单编号</view>
				<view class="texter">实际支付</view>
				<view class="texter">下单时间</view>
			</view>
			<view class="bom-right">
				<view class="texter rightitle">{{ComDetail.product || ''}}</view>
				<view class="texter">{{ComDetail.order_no || ''}}</view>
				<view class="texter">￥{{ComDetail.order_amount_total}}</view>
				<view class="texter">{{ComDetail.order_time}}</view>
			</view>
		</view>
	</view>
	<!-- 空白页组件 -->
	<Blankpage v-else></Blankpage>
</template>

<script>
	import { ComplaintDetail } from '@/untils/api.js'
	import { toDate } from '@/untils/gettime.js'
	import { Blankpage } from '@/components/Blankpage/Blankpage.vue'
	export default {
		components: {
			Blankpage
		},
		data() {
			return {
				ComDetail: {},
				imgList: []
			}
		},
		onLoad(option) {
			this.getComDetail(option)
		},
		methods: {
			async getComDetail(id) {
				const { data: res } = await ComplaintDetail(id)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.ComDetail = res.data
				this.imgList = res.data.complaint_images
				this.ComDetail.order_time = toDate(res.data.order_time, 1)
				console.log(res, '投诉详情');

				if (this.ComDetail.status == 1) {
					this.ComDetail.status = '待审核'
				} else if (this.ComDetail.status == 2) {
					this.ComDetail.status = '审核拒绝'
				} else if (this.ComDetail.status == 3) {
					this.ComDetail.status = '已受理'
				} else if (this.ComDetail.status == 4) {
					this.ComDetail.status = '已取消'
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.complaintde {
		background-color: #F1F2F6;

		// 上
		.hearder {
			padding: 0 32rpx;
			padding-bottom: 51rpx;
			background-color: #fff;
			margin-bottom: 18rpx;
			overflow: hidden;

			.title {
				font-size: 34rpx;
				font-weight: 700;
				text-align: center;
				margin: 74rpx 0 60rpx;
			}

			.hear-box {
				background-color: #F8F9FB;
				border-radius: 2rpx;
				padding: 41rpx 34rpx 39rpx 51rpx;
				font-size: 22rpx;

				.box-title {
					margin-bottom: 26rpx;
				}

				.img-box {
					display: flex;
					flex-wrap: wrap;

					.img {
						margin: 10rpx 10rpx 0 0;
					}
				}
			}
		}

		// 公共
		.bom {
			padding: 34rpx 32rpx 15rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			background-color: #fff;

			.texter {
				margin-bottom: 20rpx;
			}

			.leftitle {
				font-weight: 600;
			}

			.rightitle {
				margin-top: 55rpx;
			}

			.main-right,
			.bom-right {
				text-align: right;
			}

		}

	}
</style>
